<template>
  <div class="amap-wrapper" ref="amapWrap">
    <div id="amap-box"></div>
    <div class="position-text">
      <div class="aim-wrap" @click="getCurrentLocation"><van-icon name="aim" />我的位置</div>
      <div class="aim-wrap" @click="panToCenter"><van-icon name="wap-home-o" />小区中心</div>
    </div>
  </div>
</template>

<script>
import { getCurrentLocation, regeocoderAddress } from '@/utils/geo'

export default {
  props: {
    communityInfo: Object,
  },
  watch: {
    communityInfo: function( newVal, oldVal ) {
      if ( newVal && newVal !== oldVal && this.map ) {
        // this.markerPosition = newVal.split(',')
        // this.map.setCenter(new BMap.Point(this.markerPosition[0], this.markerPosition[1]))
        // this.createGridOutline();
      }
    },
  },
  data () {
    return {
      map: null,
      maxZoom: 17,
      markerPosition: [],
      markerAddress: '',
      map: null,
      marker: null,

      communityCenter: [],
    }
  },
  mounted() { 
    this.initMap();
  },
  beforeDestroy() {
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new BMap.Map('amap-box', {
        enableMapClick: false
      })
      const point = new BMap.Point(112.549248, 37.857014)
      this.map.centerAndZoom(point, 17) // 初始化地图,设置中心点坐标和地图级别
      this.getCurrentLocation();
    },
    setZoom( zoom ) {
      this.map.setZoom(zoom)
    },
    getCurrentLocation() {
      getCurrentLocation( (info) => {
        this.$emit("currentLocation", info);
        const lnglat = info.split(',');
        this.markerPosition = [lnglat[0],lnglat[1]];
        this.map.setCenter(new BMap.Point(lnglat[0],lnglat[1]))
        this.addMarker();
      } )
    },
    addMarker() {
      if ( this.marker ) {
        this.marker.setPosition(new BMap.Point(this.markerPosition[0], this.markerPosition[1]));
      } else {
        this.marker = new BMap.Marker(new BMap.Point(this.markerPosition[0], this.markerPosition[1]));
        this.map.addOverlay(this.marker);
      }
      setTimeout( () => {
        this.marker.setZIndex(999999999);
        this.marker.draw();
        this.marker.show();
      }, 100 )
    },
    
    createGridOutline(outline) {
      this.map.removeOverlay(this.gridOutlinePolygon);
      this.gridOutlinePolygon = null; 
      // 创建多边形
      var polygon = new BMap.Polygon(outline, {
          strokeColor: 'blue',
          strokeWeight: 4,
          strokeOpacity: 0.5,
          fillColor: '#009a3b',
          fillOpacity: 0.06
      });
      this.map.addOverlay(polygon);
      this.gridOutlinePolygon = polygon;
    },

    panToCenter() {
      const point = new BMap.Point(this.communityCenter[0], this.communityCenter[1])
      this.map.panTo(point);
    },
    draw( center, arr ) {
      this.communityCenter = center;
      const point = new BMap.Point(center[0], center[1])
      this.map.panTo(point);

      const pointArr = [];
      for ( const item of arr ) {
        pointArr.push( new BMap.Point(item[0], item[1]) );
      }
      this.createGridOutline(pointArr);
    }
  }
}
</script>

<style lang="less" scoped>
.amap-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  #amap-box {
    width: 100%;
    height: 100%;
  }
  
  .position-text {
    position: absolute;
    right: 10px;
    bottom: 60px;
    font-size: 13px;
  }
  .aim-wrap {
    padding: 4px 6px;
    background: #FFF;
    border: 1px solid #1989fa;
    border-radius: 4px;
    margin: 6px 0;
    z-index: 200;

    .van-icon {
      font-size: 14px;
      vertical-align: bottom;
      margin-right: 4px;
      font-weight: bold;
    }
  }
}
</style>